<template>
	<view class="">
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">动作库</block>
		</cu-custom>
		
		<view style="width: 100%;display: flex;justify-content: space-between;padding: 0 30upx;background-color: #fff;height: 100upx;line-height: 100upx;">
			<view>
				<input style="background-color: #F6F6F6;height: 70upx;width: 600upx;line-height: 70upx;margin-top: 30upx;border-radius: 15upx; padding: 0 100upx;" placeholder="搜索动作" type="text" value="" />
			</view>
			<view @click="jump" data-src='/pagesA/Preparation_plan/Add_action' style="font-size: 88upx;margin-top: 15upx;color: #408CE2;">
				+
			</view>
		</view>
		<scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;">
			<view style="display: flex;height: 100upx;line-height: 100upx;flex-wrap: nowrap;">
				<view style="background-color: #fff;padding: 0 20upx;color: #919191;" v-for="(item,index) in menus" :key='index' :class="{active: currentIndex === index}" @click="menusClick(index)">
					{{item}}
				</view>
			</view>
		</scroll-view>
		
		<view style="width: 100%;background-color: #fff;margin-top: 20upx;">
			<view style="width: 100%;display: flex;padding: 30upx;border-bottom: 1upx solid #F6F6F6;">
				<view style="background-color: #F6F6F6;padding: 10upx 20upx;font-size: 24upx;">
					热身
				</view>
				<view style="background-color: #F6F6F6;padding: 10upx 20upx;font-size: 24upx;margin-left: 20upx;">
					正式
				</view>
				<view style="background-color: #F6F6F6;padding: 10upx 20upx;font-size: 24upx;margin-left: 20upx;">
					放松
				</view>
				<view style="background-color: #ccc;height: 50upx;width: 1upx;margin-left: 20upx;"></view>
			</view>
			<scroll-view scroll-y="true" style="width: 100%;height: 65vh;background-color: #fff;padding-bottom: 20upx;">
					<view style="display: flex;justify-content: space-between;padding: 0 30upx;margin-top: 20upx;" v-for="(item,index) in menus" :key='index' @click="menusClick(index)">
						<view style="display: flex;">
							<image style="width: 150upx;height: 100upx;" src="../../static/37.png" mode=""></image>
							<view style="margin-left: 30upx;">
								<view>
									{{item}}
								</view>
								<view style="font-size: 22upx;color: #919191;">
									{{item}}+描述
								</view>
							</view>
						</view>
						
					</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menus:['全部','胸部','背部','肩部','肩部','肩部','肩部','肩部','肩部','肩部','腿部','腿部','腿部','腿部','腿部','腿部'],
				currentIndex:0,
				}
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			});
		},
		onReady() {
			
		},
		methods: {
			setAjax(){
				var data = {
				    'openid':this.openid,
						'income_type':this.income_type,
				   }
				uni.request({
					url: '',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						this.res = res.data.list
						this.total_num = res.data.total_num
					},
					fail: () => {},
					complete: () => {}
				});
			},
			menusClick(index){
				console.log(index)
				this.currentIndex = index
				this.income_type = this.currentIndex + 1
				this.setAjax()
			},
			jump(e){
				console.log(e.currentTarget.dataset.src)
				if ( e.currentTarget.dataset.src == 'Not-yet-open') {
					uni.showModal({
						title:'提示',
						content:'功能即将开放',
						showCancel: false,
						confirmColor:"#DD524D",
							success() {
								return
							}
					})
				} else {
					uni.navigateTo({
						url: e.currentTarget.dataset.src
					});
				}
			},
			
		}
	}
</script>

<style>
	.active {border-bottom: 5upx solid #4189E6;}
</style>
